<template>
	<view class="pdfContent">
		<view class="pdf" @click="exportPDF">
			<view class="pdf-text font12">
				点击图片进行样本预览
			</view>
			<image
				src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/08/29/b87b4492daf744409df7879bf78e9aa7.jpg"
				mode=""></image>
		</view>
		<view class="flex box1">
			<view class="font14">
				<view class="bold">
					直接下单<text class="font20 bold" style="color: #F59A23;">{{onePrice}}</text>元
				</view>
				<view class="">
					发送到邮箱！
				</view>
			</view>
			<view class="code flex justify-center u-font-24 align-center" @click="$u.throttle(handleCode,1000)">
				<text>激活码兑换</text>
			</view>
			<view class="btn flex justify-center u-font-24 align-center" @click="$u.throttle(gotoPlaceOrder,1000)">
				<text>下单</text>
			</view>
		</view>
		<view class="flex box1">
			<view class="font14">
				<view class="bold">
					专家帮你优选 <text class="font20 bold" style="color: #F59A23;margin-left: 30rpx;">{{twoPrice}}</text>元
				</view>
				<view class="">
					免费赠送2份择校报告+1份调剂报告！
				</view>
			</view>
			<view class="btn font12 flex alignCenter" style="justify-content: center;" @click="hand">
				<text>咨询客服</text>
			</view>
		</view>
		<view class="flex box1">
			<view class="font14">
				<view class="bold">
					专业课高端服务<text class="font16 bold"
						style="color: #F59A23; font-style:italic; font-style:oblique;margin-left: 30rpx;">保过协议！</text>
				</view>
				<view style="max-width: 456rpx;">
					专家优选专业+直系学长高端服务+平台督学+免费送公共课+调剂保障
				</view>
			</view>
			<view class="btn font12 flex alignCenter" style="justify-content: center;" @click="hand">
				<text>咨询客服</text>
			</view>
		</view>
		<u-popup v-model="popup" mode="center">
			<view class="box">
				<template v-if="src1">
					<view class="font16 bold" style="color: #F59A23;text-align: center;">
						添加老师的微信
					</view>
					<view class="font12" style="color: #AAAAAA;text-align: center;">
						你的信息会被严格保密，敬请放心
					</view>
					<view style="text-align: center;" class="codeImage">
						<image :src="src1" mode="" show-menu-by-longpress></image>
					</view>
					<view style="font-size: 24rpx;" class="text-center">长按二维码,添加客服微信</view>
				</template>
				<template v-else>
					<view class="font16 bold" style="color: #F59A23;text-align: center;">
						老师还没有上传微信
					</view>
					<view class="font12" style="color: #AAAAAA;text-align: center;">
						可以拨打老师电话直接联系
					</view>
					<view style="text-align: center;" class="codeImage">
						<view class="callPhone" @click="phone">
							拨打电话
						</view>
					</view>
					<view style="font-size: 24rpx;" class="text-center">点击按钮，联系老师</view>
				</template>
			</view>
		</u-popup>
		<u-modal @confirm="goumai" confirm-color="#ff7b08" v-model="show" show-cancel-button
			content="您已经购买过一份择校报告了，可以在个人中心进行下载；确定要再另外购买一份吗？"></u-modal>
	</view>
</template>

<script>
	import {
		jihuomama,
		queryGoodOfChooseSchool,
		isBuyChooseReportSchool
	} from "@/api/toolbox.js"
	export default {
		data() {
			return {
				popup: false,
				show: false,
				src1: '',
				onePrice: 0,
				twoPrice: 0,
				price: null,
				phoneNumber: "",
			}
		},
		onLoad() {
			jihuomama(0).then((res) => {
				this.src1 = res.data
				this.phoneNumber = res.mapData?.phone || null;
			})
			this.getData();
		},
		methods: {
			//激活码购买
			handleCode() {
				uni.navigateTo({
					url: '/pages/toolbox/adjustReport/duihuan?type=1',
				});
			},
			goumai() {
				uni.navigateTo({
					url: '/pages/order/chooseSchoolOrder/chooseSchoolOrder?price=' + this.price
				});
			},
			getData() {
				uni.showLoading({
					mask: true
				});
				queryGoodOfChooseSchool().then(res => {
					if (res.data && res.data.length) {
						this.onePrice = res.data[0].price;
						this.twoPrice = res.data[1].price;
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			exportPDF() {
				//  #ifdef H5
				window.open(
					"https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/06/12/fbdc19e2eb7d49c59c92da41087a673d.pdf"
				)
				// #endif
				uni.showLoading({
					title: '下载中...',
					mask: true
				});
				// 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
				// #ifdef MP-WEIXIN
				uni.downloadFile({
					url: "https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/06/12/fbdc19e2eb7d49c59c92da41087a673d.pdf",
					success: res => {
						console.log(res)
						if (res.statusCode === 200) {
							// 预览pdf文件
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true, // 右上角菜单，可以进行分享保存pdf
								success: function(file) {
									console.log("file-success", file)
								}
							})
						}
					},
					complete: com => {
						uni.hideLoading();
					}
				})
				// #endif

				// #ifdef APP-PLUS
				uni.downloadFile({
					url: 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/06/12/fbdc19e2eb7d49c59c92da41087a673d.pdf',
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					},
					complete: com => {
						uni.hideLoading();
					}
				});
				// #endif
			},
			gotoPlaceOrder() {
				uni.showLoading({
					mask: true
				});
				this.price = this.onePrice;
				isBuyChooseReportSchool().then(res => {
					if (res.data && res.data > 0) {
						this.show = true;
					} else {
						this.goumai();
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			copy() {
				uni.setClipboardData({
					data: '19969130447',
					showToast: false,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
				this.popup = false;
			},
			phone() {
				this.popup = false;
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber,
					success(res) {
						console.log('打电话成功', res)
					},
					fail(err) {
						console.log('打电话失败', err)
					}
				});
			},
			hand() {
				this.popup = true;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f3f3;
	}
</style>

<style scoped lang="scss">
	.pdfContent {
		padding: 30rpx;

		.pdf {
			width: 100%;
			height: 862rpx;
			position: relative;
			background: #F2F2F2;
			border-radius: 16rpx;
			border: 2rpx solid #AAAAAA;

			.pdf-text {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				padding: 0 20rpx;
				height: 60rpx;
				border-radius: 52rpx;
				background-color: #333333;
				color: #FED534;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 999;
			}

			image {
				width: 100%;
				height: 862rpx;
			}
		}

		.box1 {
			align-items: center;
			background: #fff;
			border-radius: 16rpx;
			margin-top: 30rpx;
			padding: 30rpx 30rpx 20rpx;
			line-height: 40rpx;
			box-shadow: 0 6rpx 10rpx 0 rgba(0, 0, 0, .15);

			.code {
				width: 150rpx;
				height: 60rpx;
				background-color: #FED534;
				border-radius: 100rpx;
				margin-left: auto;
			}

			.btn {
				width: 134rpx;
				height: 60rpx;
				background: #FED534;
				border-radius: 60rpx;
				margin-left: auto;
			}
		}

		.box {
			width: 418rpx;
			// height: 700rpx;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 60rpx;

			.image {
				text-align: center;

				image {
					width: 160rpx;
					height: 160rpx;
				}

				margin-bottom: 60rpx;
			}

			.cancellation {
				width: 342rpx;
				height: 92rpx;
				border-radius: 62rpx;
				background: #73839A;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 40rpx;
				margin-bottom: 30rpx;
			}

			.confirm {
				width: 342rpx;
				height: 92rpx;
				border-radius: 62rpx;
				background: #F7DD5E;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 40rpx;
			}

			.codeImage {
				margin-top: 60rpx;
				margin-bottom: 20rpx;

				image {
					width: 260rpx;
					height: 260rpx;
				}
			}
		}
	}

	.callPhone {
		border-radius: 100rpx;
		height: 60rpx;
		background: #FED534;
		color: #333333;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
	}
</style>